<template>
  <el-form size="mini">
    <el-radio-group v-model="formVal.setType">
      <el-form-item v-if="!hideTypes.includes(1)">
        <el-radio :label="1">每{{label}}</el-radio>
      </el-form-item>

      <el-form-item v-if="!hideTypes.includes(2)">
        <el-radio :label="2">不指定</el-radio>
      </el-form-item>

      <el-form-item v-if="!hideTypes.includes(3)">
        <el-radio :label="3" class="wrap">范围</el-radio>
        <div class="item">
          <div class="line">
            从
            <el-input-number v-model='formVal.c1' :min="min" :max="max" @change="formVal.setType = 3" style="width: 130px;"/>
            {{unit}}
          </div>
          <div class="line">
            到
            <el-input-number v-model='formVal.c2' :min="min" :max="max" @change="formVal.setType = 3" style="width: 130px;"/>
            {{unit}}
          </div>
          <div class="line">
            每{{label}}执行
          </div>
        </div>
      </el-form-item>

      <el-form-item v-if="!hideTypes.includes(4)">
        <el-radio :label="4" class="wrap">间隔</el-radio>

        <div class="item">
          <div class="line">
            从
            <el-input-number v-model='formVal.a1' :min="min" :max="max" @change="formVal.setType = 4" style="width: 130px;"/>
            {{unit}}始
          </div>
          <div class="line">
            隔
            <el-input-number v-model='formVal.a2' :min="min" :max="max" @change="formVal.setType = 4" style="width: 130px;"/>
            {{label}}执行
          </div>
        </div>
      </el-form-item>

      <el-form-item v-if="!hideTypes.includes(5)">
        <el-radio :label="5">指定</el-radio>
        <div class="item">
          <el-checkbox-group v-model="formVal.vs" @change="formVal.setType = 5">
            <el-checkbox v-for="item in selItems" :key="item.label" :label="item.value" style="margin-right: 10px;">
              <span style="display: inline-block; min-width: 45px;">{{item.label}}</span>
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </el-form-item>

    </el-radio-group>

  </el-form>
</template>

<script>
  export default {
    name: 'sel',
    props: {
      value: {
        type: String,
        default: '*'
      },
      unit: {
        type: String,
        default: ''
      },
      label: {
        type: String,
        default: ''
      },
      min: {
        type: Number,
        default: 0
      },
      max: {
        type: Number,
        default: 0
      },
      hideTypes: {
        type: Array,
        default: () => []
      },
      items: {
        type: Array,
        default: () => null
      }
    },
    data() {
      return {
        formVal: {
          setType: 1,
          c1: this.min,
          c2: this.max,
          a1: this.min,
          a2: 1,
          vs: [],
        }
      }
    },
    computed: {
      selItems() {
        if (this.items && this.items.length > 0) {
          return this.items;
        }
        let items = [];
        for (let i = this.min; i <= this.max; i++) {
          items.push({label: i.toString(), value: i.toString()})
        }
        return items;
      }
    },
    methods: {
      sync() {
        if (this.value) {
          if (this.value === '*') {
            if (this.formVal.setType !== 5) {
              this.formVal.setType = 1;
            }
          } else if (this.value === '?') {
            this.formVal.setType = 2;
          } else if (this.value.indexOf('-') > 0) {
            this.formVal.setType = 3;
            let vs = this.value.split('-');
            this.formVal.c1 = vs[0];
            this.formVal.c2 = vs[1];
          } else if (this.value.indexOf('/') > 0) {
            this.formVal.setType = 4;
            let vs = this.value.split('/');
            this.formVal.a1 = vs[0];
            this.formVal.a2 = vs[1];
          } else {
            this.formVal.setType = 5;
            this.formVal.vs = this.value.split(',');
          }
        }
      },
      onUpdate() {
        switch (this.formVal.setType) {
          case 2:
            this.$emit('update:value', '?');
            break;
          case 3:
            this.$emit('update:value', this.formVal.c1 + '-' + this.formVal.c2);
            break;
          case 4:
            this.$emit('update:value', this.formVal.a1 + '/' + this.formVal.a2);
            break;
          case 5:
            if (this.formVal.vs && this.formVal.vs.length > 0) {
              this.$emit('update:value', this.formVal.vs.join());
            } else {
              this.$emit('update:value', "*");
            }
            break;
          default:
            this.$emit('update:value', '*');
            break;
        }
      }
    },
    watch: {
      value() {
        this.sync();
      },
      formVal: {
        handler() {
          this.onUpdate();
        },
        deep: true
      }
    }
  }
</script>

<style lang="less" scoped="scoped">
  .select-vs {
    width: 100%;
  }

  .line {
    display: block;
    padding: 16px 8px 0 0;
  }

  .item {
    margin-left: 24px;
  }

  .wrap {
    white-space: normal;
    line-break: anywhere;
    word-break: break-word;
  }
</style>